import {Component} from '@angular/core';
import {FormControl, FormGroup, FormBuilder} from '@angular/forms';

import 'rxjs/Rx';
import {SearchService} from "./search.service";

@Component({
  selector: 'app-search',
  templateUrl:'search.template.html'
})

export class SearchComponent {
  result: any;
  searchField: FormControl;
  coolForm: FormGroup;
  errorMessage: string;

  constructor(private searchService: SearchService, private fb: FormBuilder) {
    this.searchField = new FormControl();
    this.coolForm = fb.group({ search: this.searchField });
  }

  searchClick() {
    this.searchService.search(this.searchField.value)
      .subscribe(
        result => { this.result = result.artists.items; },
        err => { this.errorMessage = err.message; },
        () => { console.log('Completed'); }
      );
  }
}
